<template>
<div>
    <div class="title">
        <p class="renyuan">配置费用</p>
    </div>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="sosuo2_5" >
        <div style="width: 100%;padding-left: 30px;padding-bottom: 15px;border-bottom: 1px solid #dbe3f3;">
            <Form-item class="sost4_5" prop="t1">
                <p class="tit">组组机构：</p>
                <Input v-model="formValidate.t1"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost4_5" prop="t2">
                <p class="tit">组织门店：</p>
                <Input v-model="formValidate.t2"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
            </Form-item>
            <Form-item class="sost4_5" prop="">
            </Form-item>
        </div>
        <div style="padding-left: 30px;padding-top: 15px;">
        <Form-item class="sost4_5" prop="t3">
            <p class="tit">服务费用：</p>
            <Input v-model="formValidate.t3"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
        </Form-item>
        <Form-item class="sost4_5" prop="t4">
            <p class="tit">家访费用：</p>
            <Input v-model="formValidate.t4"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
        </Form-item>
        <Form-item class="sost4_5" prop="t5">
            <p class="tit">GPS费用：</p>
            <Input v-model="formValidate.t5"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
        </Form-item>
        <Form-item class="sost4_5" prop="t6">
            <p class="tit">还款方式：</p>
            <Input v-model="formValidate.t6"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
        </Form-item>
        <Form-item class="sost4_5 titl" prop="t7">
            <p class="tit">还款周期：</p>
            <Select multiple style="width:280px">
                <CheckboxGroup v-model="selec">
                    <span class="check_5">
                        <Checkbox label="1个月">
                            <span>1个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="2个月">
                            <span>2个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="3个月">
                            <span>3个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="4个月">
                            <span>4个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="5个月">
                            <span>5个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="6个月">
                            <span>6个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="7个月">
                            <span>7个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="8个月">
                            <span>8个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="9个月">
                            <span>9个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="10个月">
                            <span>10个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="11个月">
                            <span>11个月</span>
                        </Checkbox>
                    </span>
                    <span class="check_5">
                        <Checkbox label="12个月">
                            <span>12个月</span>
                        </Checkbox>
                    </span>
                </CheckboxGroup>
            </Select>
        </Form-item>
        <Form-item class="sost4_5" prop="t8">
            <p class="tit">还款利率：</p>
            <Input v-model="formValidate.t8"  size="large" placeholder="未编辑" style="width:280px;font-size: 14px"></Input>
        </Form-item>
        </div>
    </Form>
    <div  style="text-align: center;margin:260px 0px 37px 0px;">
        <Button id="serch1"  @click="handleSubmit('formValidate')" type="primary">保存</Button>
    </div>
</div>   
</template>
<script>
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                module:'users',
                selec:[],
                formValidate: {
                    _id: null,
                    t1: '',
                    t2:'',
                    t3: '',
                    t4: '',
                    t5: '',
                    t6: '',
                    t7: [],
                    t8: ''
                },
                ruleValidate: {
                    t1: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ],
                    t2: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ],
                    t3: [
                        { required: true, message: '3', trigger: 'blur' }
                    ],
                    t4: [
                        { required: true, message: '4', trigger: 'blur'  }
                    ],
                    t5: [
                        { required: true, message: '5', trigger: 'change' }
                    ],
                    t6: [
                        { required: true, message: '6', trigger: 'change' }
                    ],
                    t8: [
                        { required: true, message: '8', trigger: 'change' }
                    ]
                },
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ]
            }
        },
        methods: {
            change(){
                console.log(this.formValidate.t7)
            }
        },
        watch:{
            selec:function(){
                $('.titl .ivu-form-item-content .ivu-select .ivu-select-selection').css({'border':'1px solid #dddee1'});
                let cont=this.selec.join(',');
                $('.ivu-select-placeholder').html(cont).css({'color':'black'});
                if($('.ivu-select-placeholder').html()==''){
                    $('.ivu-select-placeholder').html('请选择').css({'color':'#bbbec4'});
                };
                this.formValidate.t7=this.selec;
            }
        }
    }
</script>
<style lang="scss" >
    .check_5{
        width: 85px;
        display: inline-block;
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .titl{

    }
    .ivu-icon-ios-close{
        position: absolute;
        top: 50%;
        line-height: 1;
        margin-top: -7px;
        font-size: 14px;
        color: #80848f;
    }
    .ivu-select-selected-value{
        margin-top:4px;
    }
    .ivu-select-placeholder{
        margin-top: 4px;
    }
    .sost4_5{
        display: inline-block;
        width: 315px;
        margin-bottom: 15px;
    }
    .sosuo2_5{
        padding: 20px 0px 20px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .ivu-checkbox-wrapper{
        font-size: 16px;
    }
    .ivu-checkbox-group{
        padding:10px 0px 10px 10px;
    }
        
</style>